<template>
  <div>
    <div class="center">唯一溯源码溯源</div>
    <div class="form">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-row type="flex" justify="space-around">
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">开始溯源</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

import axios from "axios"

export default {
  name: "findByCode",
  data() {
    return {
      form: {
        code: '',
        id: 1,
        amount: 0,
        name: '',
        category: '',
        farmer_id: '',
        producer_id: '',
        purch_time: '',
        in_time: '',
        out_time: null
      }
    }
  },
  methods: {
    onSubmit() {
      if (this.form.code.indexOf(" ") !== -1) {
        this.$message({
          type: 'error',
          message: '请勿输入空格'
        })
      } else if (this.form.code == '' || this.form.code == null || isNaN(this.form.code)) {
        this.$message({
          type: 'error',
          message: '请输入数值'
        })
      } else {
        console.log('submit with para: code: ' + this.form.code);
        axios.get('http://59.110.231.162:8181/medicine/findByTra_code/' + this.form.code, {
          headers: {
            token: this.$store.state.user.token
          }
        }).then((response) => {
          console.log(response.data.data)
          var msg
          if (response.data.data.out_time == null) {
            msg = '您查询的药材尚未出库'
          } else {
            msg = response.data.data.out_time
          }
          this.$alert('<div style="width:388px;height:auto;' +
            'border-radius:5px;background-color:#91c6ff;padding:10px;' +
            'color:white;font-size:18px">' +
            '药材ID: ' + response.data.data.id + '<br>' +
            '您输入的溯源码: ' + this.form.code + '<br>' +
            '药材名称: ' + response.data.data.name + '<br>' +
            '药材种类: ' + response.data.data.category + '<br>' +
            '库存数量: ' + response.data.data.amount + '<br>' +
            '种植园ID: ' + response.data.data.farmer_id + '<br>' +
            '生产商ID: ' + response.data.data.producer_id + '<br>' +
            '收购时间: ' + response.data.data.purch_time + '<br>' +
            '入库时间: ' + response.data.data.in_time + '<br>' +
            '出库时间: ' + msg + '</div>',
            '标题名称', {
              dangerouslyUseHTMLString: true,
              confirmButtonText: '确定',
              // 回调函数
              // callback: action => {
              //   this.$message({
              //     type: 'info',
              //     message: `action: ${action}`
              //   });
              // }
            });
        })
      }
    }
  }
}
</script>

<style scoped>
.form {
  margin: 100px auto;
  width: 50%;
}

.center {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 30px;
  text-align: center;
  color: #484848;
  margin-top: 50px;
}

.el-row--flex {
  text-align: center !important;
}
</style>
